<template>
	<view class="">
		<view class="certificate" v-if="gradeflag">
			<view class="title">
				<view class="title_item">
					<view class="title_item_left">{{activeName}}</view>
					<view class="title_item_right" @tap="down">
						<i class="icon">&#xe62a;</i>
						<!-- <text v-else style="font-size: 28upx;color:#999">长按保存</text> -->
					</view>
				</view>
			</view>
			<image class="product_bg" :src="cert_img"  mode="aspectFill" :style="'height:'+(windowHeight-57)+'px'"></image>
			<!-- 成绩海报 -->
			<!-- <view class="banner" v-if="versionflag">
						<view class="bannert_item name">王磊</view>
						<view class="bannert_item sex">男</view>
						<view class=" bannert_item group">男子10公里组</view>
						<view class="bannert_item megrade">01:23:25</view>
					</view>
				</view>
			</view>
			<image v-else class="certi" style="width: 100%;" :src="base" mode="widthFix"></image>
			<view style="width:0px;height:0px;overflow:hidden;">
				<canvas canvas-id="mycanvas" :style="'width:' + this.canvas_width + 'px;height:' + this.canvas_height + 'px;'"></canvas>
			</view> -->
		</view>
		<view class="nocertificate" v-else>
			<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/client/index/nodata.png" mode=""></image>
			<text>暂无证书</text>
		</view>
		<!-- loading 遮罩层 -->
		<loading v-if="loadflag"></loading>
		<navigation></navigation>
	</view>
	
</template>

<script>
import loading from "@/components/loading/loading.vue"
import navigation from '@/components/navigation/navigation.vue';
export default {
	components: {loading,navigation},
	data() {
		return {
			loadflag:true,
			list: ['王磊', '男', '男子接力赛', '12：03：02'],
			active_id: '',
			team_id: '',
			grade_info: {},
			gradeForm: [],
			canvas_width: '',
			canvas_height: '',
			banner: '',
			base: '',
			version: '',
			versionflag: false,
			gradeflag:false,
			mobile:'',
			cert_img : '',
			activeName: '',
			windowHeight: ''
		};
	},
	onLoad(options) {
		 // console.log (options);
		var cont = JSON.parse(options.content);
		 // console.log (cont);
		cont.form.forEach ((item) => {
			if(item.name == '手机号') {
				this.mobile = item.value
			}
		})
		this.active_id = cont.active_id;
		this.team_id = cont.team_id;
		this.gradeForm = cont.form;
		this.activeName = cont.active_name
	},
	mounted() {
		this.version = uni.getSystemInfoSync().version;
		this.getcert();
		this.getHight()
	},
	methods: {
		// 获取屏幕的高度
		getHight() {
			const res = uni.getSystemInfoSync();
			 // console.log (res.windowHeight);
			this.windowHeight = res.windowHeight
		},
		// 下载图片
		down() {
			var version = uni.getSystemInfoSync().version;
			if (version) {
				uni.saveImageToPhotosAlbum({
					filePath: this.cert_img,
					success: function() {
						//  // console.log ('save success');
						this.toast('保存成功');
					}
				});
			} else {
				uni.showModal({
					title: '提示',
					content: '长按图片保存',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		getcert() {
			var version = uni.getSystemInfoSync().version;
			this.ajax('active/checkHasCert', {
				data: {
					active_id: this.active_id,
					team_id: this.team_id,
					mobile:this.mobile
				},
				success: res => {
					this.loadflag = false
					 console.log (res);
					if( !res.code){
						this.gradeflag = false
					}else {
						this.gradeflag = true;
						this.cert_img = 'https://ykp.jyecloud.cn/phone/login/matchCert/active_id/'+this.active_id+'/team_id/'+this.team_id+'/mobile/'+this.mobile;
						// uni.getImageInfo({
						// 	src: this.cert_img,
						// 	success: image => {
						// 		console.log(image)
						// 	}
						// })
					}
				
				
				}
			});
		},
		saveVersion() {
			uni.showLoading({
				title: '正在生成成绩证书'
			});
			const ctx = uni.createCanvasContext('mycanvas');
			// 背景
			ctx.drawImage(this.banner, 0, 0, this.canvas_width, this.canvas_height);
			// ctx.setFontSize(14)
			// ctx.setFillStyle('#333')
			// ctx.fillText('nifnan',50,50)
			this.grade_info.select_form.forEach(e => {
				//  // console.log (e)
				ctx.setFontSize(e.fontSize);
				ctx.setFillStyle(e.color);
				ctx.fillText(e.value, e.dX, e.dY + 20);
			});
			ctx.draw();
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: res => {
						//  // console.log (res);
						uni.hideLoading();
						// this.base = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								//  // console.log ('save success');
								this.toast('保存成功');
							}
						});
					}
				});
			}, 500);
		},
		save() {
			uni.showLoading({
				title: '正在生成成绩证书'
			});
			const ctx = uni.createCanvasContext('mycanvas');
			// 背景
			ctx.drawImage(this.banner, 0, 0, this.canvas_width, this.canvas_height);
			// ctx.setFontSize(14)
			// ctx.setFillStyle('#333')
			// ctx.fillText('nifnan',50,50)
			this.grade_info.select_form.forEach(e => {
				//  // console.log (e)
				ctx.setFontSize(e.fontSize);
				ctx.setFillStyle(e.color);
				ctx.fillText(e.value, e.dX, e.dY + 20);
			});
			ctx.draw();
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: res => {
						//  // console.log (res);
						uni.hideLoading();
						this.base = res.tempFilePath;
					}
				});
			}, 500);
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/less/pageA/grade/certificate.less');
</style>
